<template>
  <div class="tre-panel" :style="{ width: calculatedWidth, right: calculatedRight }" @click="mouseClick">
    <q-btn flat icon="keyboard arrow left" v-show="back.showBack" @click="goBack" class="block back-button">
      <span v-show="back.showTitle">{{ back.title }}</span>
      Left Width: {{ calculatedWidth }}
    </q-btn>
    <hello></hello>
  </div>
</template>

<script>
import {
  QBtn,
  QIcon
} from 'quasar'
import treCard from './treCard'
import hello from './Hello'
import store from '../store'
import router from '../router'
export default {
  name: 'tre-container-left',
  components: {
    QBtn,
    QIcon,
    treCard,
    hello
  },
  data () {
    return {
      width: store.getters.clientWidth + 'px',
      pageName: 'left',
      isCreated: false
    }
  },
  props: {
    back: {
      type: Object,
      default: () => {
        return {
          title: '返回',
          url: 'testurl',
          showBack: true,
          showTitle: false
        }
      },
      title: String,
      url: String,
      showBack: Boolean,
      showTitle: Boolean
    }
  },
  methods: {
    goBack: () => {
      router.go(-1)
    },
    mouseClick: () => {
      console.log('当前页面为：左页面')
      store.dispatch('setCurrentPage', 'left')
    }
  },
  computed: {
    calculatedWidth: () => {
      let minWidth = 320
      let curWidth = store.getters.clientWidth
      let isCurrentPage = store.getters.currentPage === 'left'
      let isCreated = store.getters.isLeftCreated
      if (
        (isCurrentPage && curWidth <= 2 * minWidth)) {
        store.dispatch('getLeftPageWidth', store.getters.clientWidth)
        return store.getters.clientWidth + 'px'
      }
      else if (
        (isCurrentPage && curWidth > 2 * minWidth) ||
        (!isCurrentPage && curWidth > 2 * minWidth)) {
        store.dispatch('getLeftPageWidth', store.getters.clientWidth / 2)
        return store.getters.clientWidth / 2 + 'px'
      }
      else if (
        (!isCurrentPage && curWidth <= 2 * minWidth)) {
        store.dispatch('getLeftPageWidth', 0)
        return 0 + 'px'
      }
      else if (
        (isCreated)) {
        store.dispatch('setIsLeftCreated', false)
        store.dispatch('getLeftPageWidth', store.getters.clientWidth)
        return store.getters.clientWidth + 'px'
      }
    },
    calculatedRight: () => {
      let minWidth = 320
      let curWidth = store.getters.clientWidth
      let isCurrentPage = store.getters.currentPage === 'left'
      if (isCurrentPage && curWidth <= 2 * minWidth) {
        return 0 + 'px'
      }
      else if (isCurrentPage && curWidth > 2 * minWidth) {
        return store.getters.clientWidth / 2 + 'px'
      }
      else if (!isCurrentPage && curWidth <= 2 * minWidth) {
        return 0 + 'px'
      }
      else if (!isCurrentPage && curWidth > 2 * minWidth) {
        return store.getters.clientWidth / 2 + 'px'
      }
    }
  },
  created: () => {
    store.dispatch('setIsLeftCreated', true)
  }
}
</script>

<style>
.tre-panel {
  margin-left: -1px;
  border-left: 1px solid #2A4066;
  box-shadow: inset 2px 2px 2px rgba(0,0,0,.15);
  position: absolute;
  top: 51px;
  bottom: 0px;
  overflow: auto;
  text-align: center
}

.block {
  text-align: left;
}
.back-button {
  margin: auto auto auto 0;
}
</style>
